<template>
  <div class="hello">
    <h1 class="title">道路施工交通安全智能分析平台</h1>
    <div class="typeSelect">
      <el-select v-model="isConstruction" @change="isClearForm" placeholder="请选择">
        <el-option label="有施工" value="2"></el-option>
        <el-option label="无施工" value="1"></el-option>
        <el-option label="中央分隔带保通开口长度" value="3"></el-option>
        <el-option label="作业区实际通行能力计算" value="4"></el-option>
        <!-- <el-option label="匝道" value="3"></el-option> -->
        <!-- <el-option label="一级公路" value="6"></el-option>
        <el-option label="二级公路" value="4"></el-option>
        <el-option label="三级公路" value="5"></el-option> -->

      </el-select>
    </div>
    <div class="typeSelect">
      <el-select v-model="typeSelect" placeholder="请选择" @change="typeChange">
        <el-option label="标准" value="2"></el-option>
        <el-option label="对比" value="1" v-if="isConstruction != 3"></el-option>
      </el-select>
    </div>
    <div class="content">
      <el-upload action="http://82.156.136.78:8015/file/upload" :on-success="handleAvatarSuccess">
        <div class="cameraBox">
          <i class="el-icon-camera"></i>
        </div>
      </el-upload>
      <el-form ref="form" :model="form" label-width="150px">
        <el-row v-if="isConstruction == '1' || isConstruction == '2'">
          <el-col :span="11">
            <el-form-item label="标准名称">
              <el-input v-model="form.standardName" >
                <el-button slot="append" icon="el-icon-add-location" @click="toTmap('standardName')"></el-button></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="公路类别">
              <!-- <el-input v-model="form.highwayGrade"  ></el-input> -->
              <el-select v-model="form.highwayGrade" placeholder="请选择" @change="form.designSpeed = ''">
                <el-option label="高速公路" value="0"></el-option>
                <el-option label="匝道" value="5" v-if="isConstruction == 1"></el-option>
                <el-option label="一级公路" value="1"></el-option>
                <el-option label="二级公路" value="2"></el-option>
                <el-option label="三级公路" value="3"></el-option>
                <el-option label="四级公路" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="isConstruction == '3'">
          <el-row>
            <el-col :span="11">
              <el-form-item label="标准名称">
                <el-input v-model="form.standardName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保通类型 ">
                <el-select v-model="form.putongClass" placeholder="请选择" @change="putongClassChange">
                  <el-option label="中央分隔带保通开口长度一般值" value="0"></el-option>
                  <el-option label="单车道转换中央分隔带保通开口长度极限值" value="1"></el-option>
                  <el-option label="双车道转换中央分隔带开口长度极限值" value="2"></el-option>
                  <el-option label="四车道转换中央分隔带开口长度极限值" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="保通设计速度 ">
                <el-select v-model="form.designSpeed" placeholder="请选择">
                  <el-option v-for="item in speedList3" :key="item.designSpeed" :label="item.designSpeed"
                    :value="item.designSpeed"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="form.putongClass != '0'">
              <el-form-item label="保通车道宽度">
                <el-select v-model="form.laneWidth" placeholder="请选择保通车道宽度">
                  <el-option v-for="item in laneWidthList3" :key="item.laneWidth" :label="item.laneWidth"
                    :value="item.laneWidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row v-if="form.putongClass != '0'">
            <el-col :span="11">
              <el-form-item label="保通中间带宽度 ">
                <el-select v-model="form.centreWidth" placeholder="请选择">
                  <el-option v-for="item in middleWidthList3" :key="item.centreWidth" :label="item.centreWidth"
                    :value="item.centreWidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保通横坡">
                <el-select v-model="form.crossSlope" placeholder="请选择保通横坡">
                  <el-option v-for="item in slopeList3" :key="item.crossSlope" :label="item.crossSlope"
                    :value="item.crossSlope"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
        </template>
        <template v-if="isConstruction == '4'">
          <el-row>
            <el-col :span="11">
              <el-form-item label="标准名称">
                <el-input v-model="form.standardName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="作业区限制车速 ">
                <el-select v-model="form.designSpeed" placeholder="请选择" @change="putongClassChange">
                  <el-option v-for="item in speedList4" :key="item.designSpeed" :label="item.designSpeed"
                    :value="item.designSpeed"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="行车道一边有无障碍物 ">
                <el-select v-model="form.isBarrier" placeholder="请选择">
                  <el-option label="无" value="0"></el-option>
                  <el-option label="有" value="1"></el-option>

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="车道类型">
                <el-select v-model="form.laneClass" placeholder="请选择">
                  <el-option label="无中央分隔带" value="0"></el-option>
                  <el-option label="有中央分隔带的双向" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="侧向余宽 ">
                <el-select v-model="form.lateralCowidth" placeholder="请选择">
                  <el-option v-for="item in lateralCowidthList" :key="item.lateralCowidth" :label="item.lateralCowidth"
                    :value="item.lateralCowidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="车道宽度">
                <el-select v-model="form.laneWidth" placeholder="请选择">
                  <el-option v-for="item in laneWidthList4" :key="item.laneWidth" :label="item.laneWidth"
                    :value="item.laneWidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="道路类型">
                <el-select v-model="form.roadClass" placeholder="请选择" @change="hillTypeChange">
                  <el-option label="一般路段" value="0"></el-option>
                  <el-option label="特定上坡路段（122kg/kw）" value="1"></el-option>
                  <el-option label="特定上坡路段（177kg/kw）" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="地形 " v-if="form.roadClass == 0">
                <el-select v-model="form.hillType" placeholder="请选择">
                  <el-option label="平原微丘" value="0"></el-option>
                  <el-option label="重丘" value="1"></el-option>
                  <el-option label="山岭" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="form.roadClass == 1 || form.roadClass == 2">
            <el-col :span="11">
              <el-form-item label="车道形式">
                <el-select v-model="form.laneType" placeholder="请选择">
                  <el-option label=" 双向4车道高速公路）" value="1"></el-option>
                  <el-option label="双向6或8车道高速公路" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="坡度 ">
                <el-select v-model="form.slope" placeholder="请选择" @change="getSlopeLength">
                  <el-option v-for="item in slopeList4" :key="item.id" :label="item.slope"
                    :value="item.slope"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="驾驶员修正系数">
                <el-select v-model="form.driverCoefficient" placeholder="请选择">
                  <el-option v-for="item in coefficientInfoList" :key="item.driverCoefficient"
                    :label="item.driverCoefficient" :value="item.driverCoefficient"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="施工强度修正系数 ">
                <el-select v-model="form.buildIntensityCoefficient" placeholder="请选择">
                  <el-option v-for="item in buildIntensityCoefficientList" :key="item.id"
                    :label="item.buildIntensityCoefficient" :value="item.buildIntensityCoefficient"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11" v-if="form.roadClass && form.slope">
              <el-form-item label="坡长">
                <el-select v-model="form.slopeLength" placeholder="请选择">
                  <el-option v-for="item in slopeLengthList4" :key="item.slopeLength" :label="item.slopeLength"
                    :value="item.slopeLength"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保通车道数 ">
                <el-select v-model="form.lanesNum" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="3" value="3"></el-option>
                  <el-option label="4" value="4"></el-option>
                  <el-option label="5" value="5"></el-option>
                  <el-option label="6" value="6"></el-option>
                  <el-option label="7" value="7"></el-option>
                  <el-option label="8" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <el-row v-if="isConstruction == '1' || isConstruction == '2'">
          <el-col :span="11">
            <el-form-item label="车道数N">
              <el-input v-model="form.lanesNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设计速度">
              <el-select v-model="form.designSpeed" placeholder="请选择" @change="getSeepList">
                <template
                  v-if="form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4' || form.highwayGrade == '5'">
                  <el-option label="20" value="20"></el-option>
                  <el-option label="30" value="30"></el-option>
                  <el-option label="40" value="40"></el-option>
                  <el-option label="60" value="60"></el-option>
                  <el-option label="80" value="80"></el-option>
                </template>
                <template v-if="form.highwayGrade == '0'">
                  <el-option label="40" value="40"></el-option>
                  <el-option label="60" value="60"></el-option>
                  <el-option label="80" value="80"></el-option>
                  <el-option label="100" value="100"></el-option>
                  <el-option label="120" value="120"></el-option>
                </template>
                <template v-if="form.highwayGrade == '1'">
                  <el-option label="20" value="20"></el-option>
                  <el-option label="30" value="30"></el-option>
                  <el-option label="40" value="40"></el-option>
                  <el-option label="60" value="60"></el-option>
                  <el-option label="80" value="80"></el-option>
                  <el-option label="100" value="100"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isConstruction == 2">
          <el-col :span="11">
            <el-form-item label="限速值">
              <el-select v-model="form.restrictSpeed" placeholder="请选择限速" @change="getLaneWidthList()">
                <el-option v-for="item in restrictSpeedList" :key="item.restrictSpeed" :label="item.restrictSpeed"
                  :value="item.restrictSpeed"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预留行车宽度">
              <el-select v-model="form.reservedLaneWidth" placeholder="请选择限速">
                <el-option v-for="item in reservedLaneWidthList" :key="item.reservedLaneWidth"
                  :label="item.reservedLaneWidth" :value="item.reservedLaneWidth"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isConstruction == 2 && (form.highwayGrade == '1' || form.highwayGrade == '0')">
          <el-col :span="11">
            <el-form-item label="道路纵坡">
              <el-select v-model="form.uphill" placeholder="请选择">
                <el-option label="上坡" value="1"></el-option>
                <el-option label="下坡" value="2"></el-option>
              </el-select>
              <!-- <div style="display: flex">
                <el-input v-model="form.uphill"></el-input>
                <span style="padding: 0 10px">%</span>
              </div> -->
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="form.uphill">
            <el-form-item label="坡度">
              <el-select v-model="form.downhill" placeholder="请选择">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="6" value="6"></el-option>
                <el-option label="7" value="7"></el-option>
                <el-option label="8" value="8"></el-option>
                <el-option label="9" value="9"></el-option>
                <el-option label="10" value="10"></el-option>
                <el-option label="11" value="11"></el-option>
                <el-option label="12" value="12"></el-option>
                <el-option label="13" value="13"></el-option>
                <el-option label="14" value="14"></el-option>
                <el-option label="15" value="15"></el-option>
                <el-option label="16" value="16"></el-option>
                <el-option label="17" value="17"></el-option>
                <el-option label="18" value="18"></el-option>
                <el-option label="19" value="19"></el-option>
                <el-option label="20" value="20"></el-option>
              </el-select>
              <!-- <div style="display: flex">
                <el-input v-model="form.downhill"></el-input>
                <span style="padding: 0 10px">%</span>
              </div> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isConstruction == '1' || isConstruction == '2'">
          <el-col :span="11">
            <el-form-item label="C未来">
              <div style="display: flex">
                <el-input v-model="form.forecastPercent"></el-input>
                <span style="padding: 0 10px">%</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="修正系数Fp">
              <el-select v-model="form.driverAmendFactor" placeholder="请选择修正系数">
                <el-option label="0.95" value="0.95"></el-option>
                <el-option label="0.96" value="0.96"></el-option>
                <el-option label="0.97" value="0.97"></el-option>
                <el-option label="0.98" value="0.98"></el-option>
                <el-option label="0.99" value="0.99"></el-option>
                <el-option label="1" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isConstruction == '1' || isConstruction == '2'">
          <el-col :span="11">
            <el-form-item label="路侧干扰系数Ff">
              <el-select v-model="form.amendFactor" placeholder="请选择干扰系数">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="公路位置">
              <el-select v-model="form.roadTypeId" placeholder="请选择公路位置">
                <el-option label="近郊高速华北" value="1"></el-option>
                <el-option label="城间高速华北" value="2"></el-option>
                <el-option label="近郊高速东北" value="3"></el-option>
                <el-option label="城间高速东北" value="4"></el-option>
                <el-option label="近郊高速华东" value="5"></el-option>
                <el-option label="城间高速华东" value="6"></el-option>
                <el-option label="近郊高速中南" value="7"></el-option>
                <el-option label="城间高速中南" value="8"></el-option>
                <el-option label="近郊高速西南" value="9"></el-option>
                <el-option label="城间高速西南" value="10"></el-option>
                <el-option label="近郊高速西北" value="11"></el-option>
                <el-option label="城间高速西北" value="12"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isConstruction == 2">
          <el-col :span="11">
            <el-form-item label="摩阻系数">
              <el-select v-model="form.frictionCoefficient" placeholder="请选择摩阻系数">
                <el-option label="0.29" value="0.29"></el-option>
                <el-option label="0.30" value="0.30"></el-option>
                <el-option label="0.31" value="0.31"></el-option>
                <el-option label="0.32" value="0.32"></el-option>
                <el-option label="0.33" value="0.33"></el-option>
                <el-option label="0.34" value="0.34"></el-option>
                <el-option label="0.35" value="0.35"></el-option>
                <el-option label="0.36" value="0.36"></el-option>
                <el-option label="0.37" value="0.37"></el-option>
                <el-option label="0.38" value="0.38"></el-option>
                <el-option label="0.39" value="0.39"></el-option>
                <el-option label="0.40" value="0.40"></el-option>
                <el-option label="0.41" value="0.41"></el-option>
                <el-option label="0.42" value="0.42"></el-option>
                <el-option label="0.43" value="0.43"></el-option>
                <el-option label="0.44" value="0.44"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="车道形式">
              <el-select v-model="form.lanePattern" placeholder="请选择车道形式">
                <el-option label="双向四车道" value="1"></el-option>
                <el-option label="双向六车道" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-if="isConstruction == 2 && (form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4')">
          <el-col :span="11" v-if="form.designSpeed">
            <el-form-item label="平曲线半径">
              <el-select v-model="form.radiusId" placeholder="请选择限速" @change="getSlope()">
                <el-option v-for="item in radiusList" :key="item.id" :label="item.radius" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="form.designSpeed">
            <el-form-item label="下坡坡度">
              <el-select v-model="form.slopeId" placeholder="请选择限速">
                <el-option v-for="item in slopeList" :key="item.id" :label="item.slope" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-if="isConstruction == 2 && (form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4')">
          <el-col :span="11">
            <el-form-item label="通行方式">
              <el-select v-model="form.throughWayId" placeholder="请选择限速">
                <el-option v-for="item in throughWayList" :key="item.id" :label="item.throughWayName"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row v-if="isConstruction == 2">
          <el-col :span="11">
            <el-form-item label="高速公路最小警告区长度">
              <el-input v-model="form.alarmWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="纵向缓冲区最小长度">
              <el-input v-model="form.bufferWidth"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isConstruction == 2">
          <el-col :span="11">
            <el-form-item label="封闭车道上游过渡区最小长度">
              <el-input v-model="form.interimWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
						<el-form-item label="封闭车道上游过渡区最小长度">
							<el-input v-model="form.automobileTrainAbsoluteNum"></el-input>
						</el-form-item>
					</el-col>
        </el-row> -->
        <el-row v-if="form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4' || form.highwayGrade == '5'
          ">
          <el-col :span="11">
            <el-form-item label="车道宽度">
              <el-select v-model="form.laneWidth" placeholder="请选择车道宽度" @change="getShoulderWidth()">
                <el-option v-for="item in laneWidthList" :key="item.laneWidth" :label="item.laneWidth"
                  :value="item.laneWidth"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="form.laneWidth">
            <el-form-item label="路肩宽度">
              <el-select v-model="form.roadShoulderWidth" placeholder="请选择路肩宽度">
                <el-option v-for="item in shoulderWidthList" :key="item.roadShoulderWidth" :label="item.roadShoulderWidth"
                  :value="item.roadShoulderWidth"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4' || form.highwayGrade == '5'
          ">
          <el-col :span="11">
            <el-form-item label="方向分布">
              <el-select v-model="form.directionDistribute" placeholder="请选择方向分布">
                <el-option v-for="item in directionalDistributionList" :key="item.directionDistribute"
                  :label="item.directionDistribute" :value="item.directionDistribute"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <template v-if="isConstruction == '3' && typeSelect == 1">
          <p style="height: 1px; background: #ccc"></p>
          <el-upload action="http://82.156.136.78:8015/file/upload" :on-success="handleAvatarSuccess1">
            <div class="cameraBox">
              <i class="el-icon-camera"></i>
            </div>
          </el-upload>
          <el-row>
            <el-col :span="11">
              <el-form-item label="对比名称">
                <el-input v-model="form.compareName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保通类型 ">
                <el-select v-model="form.putongClassCompare" placeholder="请选择" @change="putongClassCompareChange">
                  <el-option label="中央分隔带保通开口长度一般值" value="0"></el-option>
                  <el-option label="单车道转换中央分隔带保通开口长度极限值" value="1"></el-option>
                  <el-option label="双车道转换中央分隔带开口长度极限值" value="2"></el-option>
                  <el-option label="四车道转换中央分隔带开口长度极限值" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="保通设计速度 ">
                <el-select v-model="form.designSpeedCompare" placeholder="请选择">
                  <el-option v-for="item in speedList3" :key="item.designSpeed" :label="item.designSpeed"
                    :value="item.designSpeed"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="form.putongClassCompare != '0'">
              <el-form-item label="保通车道宽度">
                <el-select v-model="form.laneWidthCompare" placeholder="请选择">
                  <el-option v-for="item in laneWidthList3Compare" :key="item.laneWidth" :label="item.laneWidth"
                    :value="item.laneWidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row v-if="form.putongClassCompare != '0'">
            <el-col :span="11">
              <el-form-item label="保通中间带宽度 ">
                <el-select v-model="form.centreWidthCompare" placeholder="请选择">
                  <el-option v-for="item in middleWidthList3Compare" :key="item.centreWidth" :label="item.centreWidth"
                    :value="item.centreWidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保通横坡">
                <el-select v-model="form.crossSlopeCompare" placeholder="请选择">
                  <el-option v-for="item in slopeList3Compare" :key="item.crossSlope" :label="item.crossSlope"
                    :value="item.crossSlope"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
        </template> -->
        <template v-if="isConstruction == '4' && typeSelect == 1">
          <p style="height: 1px; background: #ccc"></p>
          <el-upload action="http://82.156.136.78:8015/file/upload" :on-success="handleAvatarSuccess1">
            <div class="cameraBox">
              <i class="el-icon-camera"></i>
            </div>
          </el-upload>
          <el-row>
            <el-col :span="11">
              <el-form-item label="对比名称">
                <el-input v-model="form.standardName"></el-input>
                
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="作业区限制车速 ">
                <el-select v-model="form.designSpeedCompare" placeholder="请选择" @change="putongClassChange">
                  <el-option v-for="item in speedList4Compare" :key="item.designSpeed" :label="item.designSpeed"
                    :value="item.designSpeed"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="行车道一边有无障碍物 ">
                <el-select v-model="form.isBarrierCompare" placeholder="请选择">
                  <el-option label="无" value="0"></el-option>
                  <el-option label="有" value="1"></el-option>

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="车道类型">
                <el-select v-model="form.laneClassCompare" placeholder="请选择">
                  <el-option label="无中央分隔带" value="0"></el-option>
                  <el-option label="有中央分隔带的双向" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="侧向余宽 ">
                <el-select v-model="form.lateralCowidthCompare" placeholder="请选择">
                  <el-option v-for="item in lateralCowidthListCompare" :key="item.lateralCowidth"
                    :label="item.lateralCowidth" :value="item.lateralCowidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="车道宽度">
                <el-select v-model="form.laneWidthCompare" placeholder="请选择">
                  <el-option v-for="item in laneWidthList4Compare" :key="item.laneWidth" :label="item.laneWidth"
                    :value="item.laneWidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="道路类型">
                <el-select v-model="form.roadClassCompare" placeholder="请选择" @change="hillTypeChangeCompare">
                  <el-option label="一般路段" value="0"></el-option>
                  <el-option label="特定上坡路段（122kg/kw）" value="1"></el-option>
                  <el-option label="特定上坡路段（177kg/kw）" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="地形" v-if="form.roadClassCompare == 0">
                <el-select v-model="form.hillTypeCompare" placeholder="请选择">
                  <el-option label="平原微丘" value="0"></el-option>
                  <el-option label="重丘" value="1"></el-option>
                  <el-option label="山岭" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="form.roadClassCompare == 1 || form.roadClassCompare == 2">
            <el-col :span="11">
              <el-form-item label="车道形式">
                <el-select v-model="form.laneTypeCompare" placeholder="请选择">
                  <el-option label=" 双向4车道高速公路）" value="1"></el-option>
                  <el-option label="双向6或8车道高速公路" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="坡度 ">
                <el-select v-model="form.slopeCompare" placeholder="请选择" @change="getSlopeLengthCompare">
                  <el-option v-for="item in slopeList4Compare" :key="item.id" :label="item.slope"
                    :value="item.slope"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="驾驶员修正系数">
                <el-select v-model="form.driverCoefficientCompare" placeholder="请选择">
                  <el-option v-for="item in coefficientInfoListCompare" :key="item.driverCoefficient"
                    :label="item.driverCoefficient" :value="item.driverCoefficient"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="施工强度修正系数 ">
                <el-select v-model="form.buildIntensityCoefficientCompare" placeholder="请选择">
                  <el-option v-for="item in buildIntensityCoefficientListCompare" :key="item.id"
                    :label="item.buildIntensityCoefficient" :value="item.buildIntensityCoefficient"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11" v-if="form.roadClassCompare && form.slopeCompare">
              <el-form-item label="坡长">
                <el-select v-model="form.slopeLengthCompare" placeholder="请选择">
                  <el-option v-for="item in slopeLengthList4Compare" :key="item.slopeLength" :label="item.slopeLength"
                    :value="item.slopeLength"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保通车道数 ">
                <el-select v-model="form.lanesNumCompare" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="3" value="3"></el-option>
                  <el-option label="4" value="4"></el-option>
                  <el-option label="5" value="5"></el-option>
                  <el-option label="6" value="6"></el-option>
                  <el-option label="7" value="7"></el-option>
                  <el-option label="8" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-if="typeSelect == 1 && (isConstruction == '1' || isConstruction == '2')">
          <p style="height: 1px; background: #ccc"></p>
          <el-upload action="http://82.156.136.78:8015/file/upload" :on-success="handleAvatarSuccess1">
            <div class="cameraBox">
              <i class="el-icon-camera"></i>
            </div>
          </el-upload>
          <!-- <el-row>
            <el-col :span="11">
              <el-form-item label="小客车">
                <el-input v-model="form.minibusAbsoluteNumCompare"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="中型车">
                <el-input v-model="form.middleCarAbsoluteNumCompare"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="11">
              <el-form-item label="对比名称">
                <el-input v-model="form.compareName">
                  <el-button slot="append" icon="el-icon-add-location" @click="toTmap('compareName')"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="11">
              <el-form-item label="汽车列车">
                <el-input v-model="form.automobileTrainAbsoluteNumCompare"></el-input>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="车道数N">
                <el-input v-model="form.lanesNumCompare"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="设计速度">
                <el-select v-model="form.designSpeedCompare" placeholder="请选择限速" @change="getSeepList">
                  <template
                    v-if="form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4' || form.highwayGrade == '5'">
                    <el-option label="20" value="20"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="40" value="40"></el-option>
                    <el-option label="60" value="60"></el-option>
                    <el-option label="80" value="80"></el-option>
                  </template>
                  <template v-if="form.highwayGrade == '0'">
                    <el-option label="40" value="40"></el-option>
                    <el-option label="60" value="60"></el-option>
                    <el-option label="80" value="80"></el-option>
                    <el-option label="100" value="100"></el-option>
                    <el-option label="120" value="120"></el-option>
                  </template>
                  <template v-if="form.highwayGrade == '1'">
                    <el-option label="20" value="20"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="40" value="40"></el-option>
                    <el-option label="60" value="60"></el-option>
                    <el-option label="80" value="80"></el-option>
                    <el-option label="100" value="100"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="isConstruction == 2">
            <el-col :span="11">
              <el-form-item label="限速值">
                <el-select v-model="form.restrictSpeedCompare" placeholder="请选择" @change="getLaneWidthList(1)">
                  <el-option v-for="item in restrictSpeedListCompare" :key="item.restrictSpeed"
                    :label="item.restrictSpeed" :value="item.restrictSpeed"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="预留行车宽度">
                <el-select v-model="form.reservedLaneWidthCompare" placeholder="请选择">
                  <el-option v-for="item in reservedLaneWidthList" :key="item.reservedLaneWidth"
                    :label="item.reservedLaneWidth" :value="item.reservedLaneWidth"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            v-if="isConstruction == 2 && (form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4')">
            <el-col :span="11">
              <el-form-item label="平曲线半径">
                <el-select v-model="form.radiusIdCompare" placeholder="请选择" @change="getSlope2()">
                  <el-option v-for="item in radiusListCompare" :key="item.id" :label="item.radius"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="下坡坡度">
                <el-select v-model="form.slopeIdCompare" placeholder="请选择">
                  <el-option v-for="item in slopeListCompare" :key="item.id" :label="item.slope"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11"
              v-if="isConstruction == 2 && (form.highwayGrade == '2' || form.highwayGrade == '3' || form.highwayGrade == '4')">
              <el-form-item label="通行方式">
                <el-select v-model="form.throughWayIdCompare" placeholder="请选择">
                  <el-option v-for="item in throughWayList" :key="item.id" :label="item.throughWayName"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="C未来">
                <div style="display: flex">
                  <el-input v-model="form.forecastPercentCompare"></el-input>
                  <span style="padding: 0 10px">%</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <div class="title">
          <el-button type="primary" @click="onSubmit(2)">立即创建</el-button>
        </div>
      </el-form>
      <template v-if="isImageShow">
        <template v-if="isConstruction == '3'">
          标准： {{ resultData.putongOpenWidth }}
        </template>
        <template v-if="isConstruction == '4'">
          <div class="imageItem">
            <img src="../assets/4.png" alt="" />
            <span>={{ resultData.zcb }}*{{ resultData.zfw }}*{{ resultData.zfhv }}*{{ resultData.zfp }}*{{ resultData.zfi
            }}*{{ resultData.zn }}={{ resultData.zc }}</span>
          </div>
        </template>

        <template v-if="isConstruction == '1' || isConstruction == '2'">
          <div class="imageList">
            <div class="imageItem" v-if="this.form.highwayGrade == '1' || this.form.highwayGrade == '0'">
              <img src="../assets/1.png" alt="" />
              <span>1/[1+{{ resultData.p1 }}({{ resultData.e1 }}-1)+{{
                resultData.p2
              }}({{ resultData.e2 }}-1)+{{ resultData.p3 }}({{
  resultData.e3
}}-1)]={{ resultData.fhv }}</span>
            </div>
            <div class="imageItem" v-if="this.form.highwayGrade == '1' || this.form.highwayGrade == '0'">
              <img src="../assets/2.png" alt="" /><span>{{ resultData.mfs }}*{{ resultData.fhv }}*{{ resultData.fp }}*{{
                resultData.ff
              }}={{ resultData.cd }}</span>
            </div>
            <div class="imageItem" v-if="this.form.highwayGrade == '1' || this.form.highwayGrade == '0'">
              <img src="../assets/3.png" alt="" /><span>=({{ resultData.minibusAbsoluteNum }}+{{
                resultData.middleCarAbsoluteNum }}+{{
    resultData.largeCarAbsoluteNum
  }}+{{ resultData.automobileTrainAbsoluteNum }})*{{ resultData.k }}*{{
  resultData.d
}}/{{ resultData.n }}/{{ resultData.cd }}={{
  resultData.serviceLevelValue
}}</span>
            </div>
            <div class="imageItem"
              v-if="this.form.highwayGrade == '3' || this.form.highwayGrade == '4' || this.form.highwayGrade == '5' || this.form.highwayGrade == '2'">
              <img src="../assets/home2.png" alt="" /><span>=({{ resultData.minibusAbsoluteNum }}+{{
                resultData.middleCarAbsoluteNum }}+{{
    resultData.largeCarAbsoluteNum
  }}+{{ resultData.automobileTrainAbsoluteNum }})*{{ resultData.k }}/{{ resultData.n }}/{{ resultData.cd
}}={{
  resultData.serviceLevelValue
}}</span>
            </div>
            <div v-if="isConstruction == '2'">
              S=S1+S2+S3={{ resultData.s1 }}+{{ resultData.s2 }}+{{
                resultData.s3
              }}={{ resultData.s }}
            </div>
            <div style="color: red">
              <span v-if="resultData.alarmWidthWarn">{{
                resultData.alarmWidthWarn
              }}</span>
              <span v-if="resultData.interimWidthWarn">{{
                resultData.interimWidthWarn
              }}</span>
              <span v-if="resultData.bufferWidthWarn">{{
                resultData.bufferWidthWarn
              }}</span>
            </div>
            <div class="imageItem"
              v-if="this.form.highwayGrade == '3' || this.form.highwayGrade == '4' || this.form.highwayGrade == '5' || this.form.highwayGrade == '2'">
              <img src="../assets/home4.png" alt="" />
              <span>={{ resultData.mfs }}*{{ resultData.fhv }}*{{ resultData.fd }}*{{
                resultData.fw
              }}*{{ resultData.ff }}={{ resultData.cd }}</span>
            </div>

          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="vehicleAbsoluteNumName" width="150">
              <!-- <template slot-scope="scope" slot="header">
                {{ scope.row.vehicleAbsoluteNumName }}
                <div class="headBox">
                  <div class="headerCon1">区域</div>
              <div class="headerCon2">类型</div>
                  <div class="line"></div>
                </div>
              </template> -->
            </el-table-column>
            <el-table-column :prop="item.prop" :label="item.name" v-for="(item, index) in tableHead" :key="index">
            </el-table-column>
          </el-table>
          <h4>服务水平为：{{ resultData.serviceLevel }}</h4>
        </template>
      </template>
      <div class="title" v-if="downloadShow">
        <el-button type="primary" @click="download(1)">表格下载</el-button>
      </div>
      <div v-if="resultDataCompare.putongOpenWidth && isConstruction == '3'">

      </div>
      <template v-if="isComperaShow">
        <!-- <template v-if="isConstruction == '3'">
          对比：{{ resultDataCompare.putongOpenWidth }}
        </template> -->
        <template v-if="isConstruction == '4'">
          <div class="imageItem">
            <img src="../assets/4.png" alt="" />
            <span>={{ resultDataCompare.zcb }}*{{ resultDataCompare.zfw }}*{{ resultDataCompare.zfhv }}*{{
              resultDataCompare.zfp }}*{{ resultDataCompare.zfi }}*{{ resultDataCompare.zn }}={{ resultDataCompare.zc
  }}</span>
          </div>
        </template>
        <template v-if="isConstruction == '1' || isConstruction == '2'">
          <div class="imageList" style="border-top: 1px solid #ccc">
            <div class="imageItem" v-if="this.form.highwayGrade == '1' || this.form.highwayGrade == '0'">
              <img src="../assets/1.png" alt="" />
              <span>1/[1+{{ resultDataCompare.p1 }}({{ resultDataCompare.e1 }}-1)+{{
                resultDataCompare.p2
              }}({{ resultDataCompare.e2 }}-1)+{{ resultDataCompare.p3 }}({{
  resultDataCompare.e3
}}-1)]={{ resultDataCompare.fhv }}</span>
            </div>
            <div class="imageItem" v-if="this.form.highwayGrade == '1' || this.form.highwayGrade == '0'">
              <img src="../assets/2.png" alt="" /><span>{{ resultDataCompare.mfs }}*{{ resultDataCompare.fhv
              }}*{{
  resultDataCompare.fp
}}*{{ resultDataCompare.ff }}={{ resultDataCompare.cd }}</span>
            </div>
            <div class="imageItem" v-if="this.form.highwayGrade == '0' || this.form.highwayGrade == '1'">
              <img src="../assets/3.png" alt="" /><span>=({{ resultDataCompare.minibusAbsoluteNum }}+{{
                resultDataCompare.middleCarAbsoluteNum
              }}+{{ resultDataCompare.largeCarAbsoluteNum }}+{{
  resultDataCompare.automobileTrainAbsoluteNum
}})*{{ resultDataCompare.k }}*{{ resultDataCompare.d }}/{{
  resultDataCompare.n
}}/{{ resultDataCompare.cd }}={{
  resultDataCompare.serviceLevelValue
}}</span>
            </div>
            <div class="imageItem"
              v-if="this.form.highwayGrade == '3' || this.form.highwayGrade == '4' || this.form.highwayGrade == '5' || this.form.highwayGrade == '2'">
              <img src="../assets/home2.png" alt="" />
              <span>=({{ resultDataCompare.minibusAbsoluteNum }}+{{
                resultDataCompare.middleCarAbsoluteNum }}+{{
    resultDataCompare.largeCarAbsoluteNum
  }}+{{ resultDataCompare.automobileTrainAbsoluteNum }})*{{ resultDataCompare.k }}/{{ resultDataCompare.n
}}/{{ resultDataCompare.cd
}}={{
  resultDataCompare.serviceLevelValue
}}</span>
            </div>
            <div v-if="isConstruction == '2'">
              S=S1+S2+S3={{ resultDataCompare.s1 }}+{{ resultDataCompare.s2 }}+{{
                resultDataCompare.s3
              }}={{ resultDataCompare.s }}
            </div>
            <div style="color: red">
              <span v-if="resultDataCompare.alarmWidthWarn">{{
                resultDataCompare.alarmWidthWarn
              }}</span>
              <span v-if="resultDataCompare.interimWidthWarn">{{
                resultDataCompare.interimWidthWarn
              }}</span>
              <span v-if="resultDataCompare.bufferWidthWarn">{{
                resultDataCompare.bufferWidthWarn
              }}</span>
            </div>
            <div class="imageItem"
              v-if="this.form.highwayGrade == '3' || this.form.highwayGrade == '4' || this.form.highwayGrade == '5' || this.form.highwayGrade == '2'">
              <img src="../assets/home4.png" alt="" />
              <span>={{ resultDataCompare.mfs }}*{{ resultDataCompare.fhv }}*{{ resultDataCompare.fd }}*{{
                resultDataCompare.fw
              }}*{{ resultDataCompare.ff }}={{ resultDataCompare.cd }}</span>
            </div>
          </div>

          <el-table :data="tableDataCompare" border style="width: 100%">
            <el-table-column prop="vehicleAbsoluteNumName" width="150">
              <!-- <template slot-scope="scope" slot="header">
                {{ scope.row.vehicleAbsoluteNumName }}
                <div class="headBox">
                  <div class="headerCon1">区域</div>
              <div class="headerCon2">类型</div>
                  <div class="line"></div>
                </div>
              </template> -->
            </el-table-column>
            <el-table-column :prop="item.prop" :label="item.name" v-for="(item, index) in tableHead" :key="index">
            </el-table-column>
          </el-table>
          <h4>服务水平为：{{ resultDataCompare.serviceLevel }}</h4>
          <div class="title">
            <el-button type="primary" @click="download(2)">对比表格下载</el-button>
          </div>
        </template>
      </template>
      <div class="chartsBox" v-if="isConstruction != 3">
        <div id="myBarId"></div>
        <ul class="num">
          <li>一级服务水平</li>
          <li>二级服务水平</li>
          <li>三级服务水平</li>
          <li>四级服务水平</li>
          <li>五级服务水平</li>
          <li>六级服务水平</li>
        </ul>
      </div>
    </div>
    <div v-if="isConstruction != 3">
      <guaueCharts :chartData="guaueData" v-if="isImageShow"></guaueCharts>
      <guaueCharts1 :chartData="guaueData1" v-if="isComperaShow"></guaueCharts1>

      <div v-if="isImageShow">
        <pieCharts :chartData="pieChartsData"></pieCharts>
      </div>
      <div v-if="isComperaShow">
        <pieCharts1 :chartData="pieData1"></pieCharts1>
      </div>
      <barGroup :chartData="barGroupData"></barGroup>
      <lineLevel :chartData="lineLevelData"></lineLevel>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import guaueCharts from "@/components/guaueCharts.vue";
import guaueCharts1 from "@/components/guaueChartsCompare.vue";
import pieCharts from "@/components/pieCharts.vue";
import pieCharts1 from "@/components/pieChartsCompare.vue";
import barGroup from '@/components/barGroup.vue';
import lineLevel from '@/components/lineLevel.vue'
export default {
  name: "home",
  components: {
    guaueCharts, guaueCharts1,
    pieCharts, pieCharts1,
    barGroup, lineLevel
  },
  data() {
    return {
      typeSelect: "2",
      isConstruction: "1",
      isImageShow: false,
      isComperaShow: false,
      tableData: [],
      tableDataCompare: [],
      tableHead: [
        { name: "小客车", prop: "minibusAbsoluteNum" },
        { name: "中客车", prop: "middleCarAbsoluteNum" },
        { name: "大型车", prop: "largeCarAbsoluteNum" },
        { name: "汽车列车", prop: "automobileTrainAbsoluteNum" },
        { name: "绝对数", prop: "absoluteNum" },
        { name: "当量数", prop: "equivalentNum" },
      ],
      shoulderWidthList: [], //路肩宽度+
      laneWidthList: [], //车道宽度
      directionalDistributionList: [], //方向分布list
      restrictSpeedListCompare: [],
      form: {
        forecastPercent: "", //c未来
        amendFactor: "", ///路侧干扰修正系数id
        driverAmendFactor: "", //驾驶人总体特征修正系数
        lanesNum: "", //车道数
        minibusAbsoluteNum: "",
        middleCarAbsoluteNum: "",
        largeCarAbsoluteNum: "",
        automobileTrainAbsoluteNum: "",
        roadTypeId: "",
        reservedLaneWidth: "",
        designSpeed: "", //设计速度
        restrictSpeed: "", //限速值
        uphill: "", //上坡
        downhill: "", //下坡
        frictionCoefficient: "", //摩阻系数
        lanePattern: "", //车道形式  1 双向四车道  2 双向六车道
        creatorId: localStorage.getItem("userId"),
        alarmWidth: "",
        interimWidth: "",
        bufferWidth: "",
        laneWidth: "", //车道宽度
        roadShoulderWidth: "", //路肩宽度
        directionDistribute: "", //方向分布
        minibusAbsoluteNumCompare: "", //对比小客车绝对数
        middleCarAbsoluteNumCompare: "", //对比中型车绝对数
        largeCarAbsoluteNumCompare: "", //对比大型车绝对数
        automobileTrainAbsoluteNumCompare: "", //对比汽车列车绝对数
        lanesNumCompare: "", //对比车道数
        designSpeedCompare: "", //对比设计速度
        restrictSpeedCompare: "", //对比限制速度
        reservedLaneWidthCompare: "", //对比预留行车宽度
        forecastPercentCompare: "",
        path: '',
        pathCompare: '',
        standardName: '',       //标准名称
        compareName: '',      //对比名称
        highwayGrade: '',   //公路等级
        radiusId: "", //平曲面半径ID
        slopeId: "", //坡度ID
        throughWayId: "", //通行方式ID
        radiusIdCompare: "", //平曲面半径ID
        slopeIdCompare: "", //坡度ID
        throughWayIdCompare: "", //通行方式ID
        "centreWidth": "", //中间带宽度
        "crossSlope": "", //横坡
        "putongClass": "", //保通类型   0 中央分隔带   1 单车道    2  双车道   3 四车道
        "centreWidthCompare": "", //中间带宽度对比
        "crossSlopeCompare": "", //横坡对比
        "laneWidthCompare": "", //车道宽度对比
        "putongClassCompare": "", //保通类型对比
        "laneClass": "", //车道类型      0  无中央分隔带   1 有中央分隔带的双向 6 或 8 车道公路（每个方向有3 或4 车道）
        "isBarrier": "", //有无障碍物   0  无  1 有
        "lateralCowidth": "", //侧向余宽
        "hillType": "", //地形  0  平原微丘  1 重丘  2 山岭
        "roadClass": "", //道路类型  0  一般路段  1 特定上坡路段（122kg/kw）  2 特定上坡路段（177 kg/kw）
        "slope": "", //坡度
        "slopeLength": "", //坡长
        "laneType": "", //车道    1  双向 4 车道高速公路    2 双向6 或8 车道高速公路
        "driverCoefficient": "", //驾驶员熟悉程度修正系数
        "buildIntensityCoefficient": "", //作业区施工强度修正系数
        "laneClassCompare": "", //车道类型对比      0  无中央分隔带   1 有中央分隔带的双向 6 或 8 车道公路（每个方向有3 或4 车道）
        "isBarrierCompare": "", //有无障碍物对比   0  无  1 有
        "lateralCowidthCompare": "", //侧向余宽对比
        "hillTypeCompare": "", //地形对比  0  平原微丘  1 重丘  2 山岭
        "roadClassCompare": "", //道路类型对比  0  一般路段  1 特定上坡路段（122kg/kw）  2 特定上坡路段（177 kg/kw）
        "slopeCompare": "", //坡度对比
        "slopeLengthCompare": "", //坡长对比
        "laneTypeCompare": "", //车道对比    1  双向 4 车道高速公路    2 双向6 或8 车道高速公路
        "driverCoefficientCompare": "", //驾驶员熟悉程度修正系数对比
        "buildIntensityCoefficientCompare": "" //作业区施工强度修正系数对比
      },

      resultData: {
        fhv: "",
        mfs: "",
        fp: "",
        ff: "",
        cd: "",
        ddhv: "",
        n: "",
        k: "",
        d: "",
        p1: "",
        e1: "",
        p2: "",
        e2: "",
        p3: "",
        e3: "",
        n: '',
        alarmWidthWarn: "",
        interimWidthWarn: "",
        bufferWidthWarn: "",
        minibusAbsoluteNum: "",
        middleCarAbsoluteNum: "",
        largeCarAbsoluteNum: "",
        automobileTrainAbsoluteNum: "",
      },
      resultDataCompare: {
        fhv: "",
        mfs: "",
        fp: "",
        ff: "",
        cd: "",
        ddhv: "",
        n: "",
        k: "",
        d: "",
        p1: "",
        e1: "",
        p2: "",
        e2: "",
        p3: "",
        e3: "",
        n: '',
        alarmWidthWarn: "",
        interimWidthWarn: "",
        bufferWidthWarn: "",
        minibusAbsoluteNum: "",
        middleCarAbsoluteNum: "",
        largeCarAbsoluteNum: "",
        automobileTrainAbsoluteNum: "",
      },
      contastData: null,
      reservedLaneWidthList: [],
      restrictSpeedList: [],
      radiusList: [],//半径
      slopeList: [],
      throughWayList: [],
      radiusListCompare: [],//半径
      slopeListCompare: [],
      throughWayListCompare: [],
      slopeList3: [],//保通横坡
      middleWidthList3: [],//中间带宽度
      laneWidthList3: [],//车道宽度
      speedList3: [],//保通设计速度
      slopeList3Compare: [],//保通横坡
      middleWidthList3Compare: [],//中间带宽度
      laneWidthList3Compare: [],//车道宽度
      speedList3Compare: [],//保通设计速度

      speedList4: [],
      lateralCowidthList: [],
      laneWidthList4: [],
      slopeLengthList4: [],
      slopeList4: [],
      coefficientInfoList: [],//作业区驾驶员熟悉程度
      buildIntensityCoefficientList: [],//作业区施工强度修正系数
      // 对比
      speedList4Compare: [],
      lateralCowidthListCompare: [],
      laneWidthList4Compare: [],
      slopeLengthList4Compare: [],
      slopeList4Compare: [],
      coefficientInfoListCompare: [],//作业区驾驶员熟悉程度
      buildIntensityCoefficientListCompare: [],//作业区施工强度修正系数
      downloadShow: false,
      contastDownloadShow: false,
      isContastImageShow: false,
      myChart: null,
      barOption: {
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0, fontSize: 20, color: '#000',
            formatter: function (value) {
              // 使用正则表达式来判断是否有\n，并对存在的\n进行处理
              if (value.length > 7) {
                return '\n' + value.substring(0, 7) + '\n' + value.substring(7);
              } else {
                return value;
              }
            }
          },

          // 调整X轴文字方向
          data: ["嘿嘿二黄凯撒开卷考试", "哈哈"],
        },
        visualMap: {
          min: 1,
          max: 6,
          dimension: 1,
          orient: "vertical",
          right: 10,
          top: "center",
          // text: ['HIGH', 'LOW'],
          calculable: true,
          inRange: {
            color: ["green", "orange", "red"],
          },
        },
        yAxis: {
          type: "value",
          max: 6,
          min: 0,
          axisLine: {
            show: true, // 控制x轴线是否显示
            lineStyle: {
              width: 1, // x轴线宽度
              type: "solid", // x轴线类型，可以是 'solid', 'dashed', 或 'dotted'
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                'rgba(255, 255, 255, 0.1)',
                'rgba(204, 204, 204, 0.1)',
                'rgba(255, 255, 255, 0.1)',
                'rgba(204, 204, 204, 0.1)',
                'rgba(255, 255, 255, 0.1)',
                'rgba(204, 204, 204, 0.1)',
              ]
            }
          },
          // 删除 axisLabel 显示刻度
          axisLabel: {
            show: false,
          },
          // 0.35 0.55 0.75 0.9 1
        },
        series: [
          {
            dataBackground: "green",
            data: [0, 5],
            type: "bar",
            barWidth: "20%",
            label: {
              show: true,
              position: "top",
              fontSize: 20
            },
          },
        ],
      },
      guaueData: 100,   // 仪表盘
      guaueData1: 0,   // 仪表盘
      pieChartsData: [],
      pieData1: [],
      lineLevelData: {
        xAxisData: ['2012/2/1 ', '2012/2/2', '2012/2/3', '2012/2/4', '2012/2/5'],
        data: [
          {
            type: 'bar', barWidth: '30%', data: [0.23, 0.4, 0.5, 0.21, 0.23], label: {
              show: true, position: 'top', fontSize: 15
            },
          },
          {
            type: 'bar', barWidth: '30%', data: [0.86, 0.4, 0.5, 0.2, 0.23], label: {
              show: true, position: 'top', fontSize: 15 // 显示位置
            },
          },
        ]
      },
      barGroupData: {
        xAxisData: [
          {
            type: 'category',
            data: ['2012/2/1  125465', '2012/2/2', '2012/2/3', '2012/2/4', '2012/2/5'],
            axisLabel: {
              show: true, interval: 0, fontSize: 15, rotate: 45
            },

          },
        ],
        data: [
          {
            name: '小客车',
            type: 'bar',
            stack: '周',
            barWidth: '10%',
            data: [200, 300, 400],
          },
          {
            name: '中型车',
            type: 'bar',
            stack: '周',
            barWidth: '10%',
            data: [0, 0, 0]
          },
          {
            name: '大型车',
            type: 'bar',
            stack: '周',
            barWidth: '10%',
            data: [0, 0, 0]
          },
          {
            name: '汽车列车',
            type: 'bar',
            stack: '周',
            barWidth: '10%',
            data: [230, 300, 400]
          },

        ]
      },
      fileList: [],
    };
  },
  mounted() {
    this.getRampList();
      var element = document.getElementById('myBarId');
      if(element){
        this.myChart = echarts.init(element);
      this.myChart.setOption(this.barOption);
      }
      console.log(this.$route.query.params);
     
  },
  activated(){
    if(this.$route.query.typeName){
        this.form[this.$route.query.typeName]=this.$route.query.params
      }
    console.log(this.$route.query.params,'缓存');
},
  methods: {
    toTmap(type){
      this.$router.push({
        path:'/tmap',
        query:{
          type:type
        }
      })
    },
    typeChange() {
      if (this.typeSelect == 1) {
        this.$http.post("/vehicleBasicInfo/selectBuildDesignSpeedInfoList",).then((res) => {
          this.speedList4Compare = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectLateralCowidthInfoList",).then((res) => {
          this.lateralCowidthListCompare = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectCapacityLaneWidthInfoList",).then((res) => {
          this.laneWidthList4Compare = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectDriverCoefficientInfoList",).then((res) => {
          this.coefficientInfoListCompare = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectBuildIntensityCoefficientList",).then((res) => {
          this.buildIntensityCoefficientListCompare = res.data.data;
        });
      }
    },
    isClearForm() {
      if (this.isConstruction == 4) {
        this.$http.post("/vehicleBasicInfo/selectBuildDesignSpeedInfoList",).then((res) => {
          this.speedList4 = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectLateralCowidthInfoList",).then((res) => {
          this.lateralCowidthList = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectCapacityLaneWidthInfoList",).then((res) => {
          this.laneWidthList4 = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectDriverCoefficientInfoList",).then((res) => {
          this.coefficientInfoList = res.data.data;
        });
        this.$http.post("/vehicleBasicInfo/selectBuildIntensityCoefficientList",).then((res) => {
          this.buildIntensityCoefficientList = res.data.data;
        });
      }
      this.form = this.$options.data().form
    },
    //根据地形获取坡度
    hillTypeChange() {
      this.$http.post("/vehicleBasicInfo/selectSlopeInfoList", { roadClass: this.form.roadClass }).then((res) => {
        this.slopeList4 = res.data.data;
      });
    },
    hillTypeChangeCompare() {
      this.$http.post("/vehicleBasicInfo/selectSlopeInfoList", { roadClass: this.form.roadClassCompare }).then((res) => {
        this.slopeList4Compare = res.data.data;
      });
    },
    //根据坡度获取坡长
    getSlopeLength() {
      this.$http.post("/vehicleBasicInfo/selectSlopeLengthInfoList", { roadClass: this.form.roadClass, slope: this.form.slope }).then((res) => {
        this.slopeLengthList4 = res.data.data;
      });
    },
    //根据坡度获取坡长
    getSlopeLengthCompare() {
      this.$http.post("/vehicleBasicInfo/selectSlopeLengthInfoList", { roadClass: this.form.roadClassCompare, slope: this.form.slopeCompare }).then((res) => {
        this.slopeLengthList4Compare = res.data.data;
      });
    },
    getSeepList() {
      this.$http
        .post("/vehicleBasicInfo/selectDesignSpeedInfoList", {
          designSpeed: this.form.designSpeed,
        })
        .then((res) => {
          this.restrictSpeedList = res.data.data;
        });

      this.$http
        .post("/vehicleBasicInfo/selectRadiusByDesignSpeed", {
          designSpeed: this.form.designSpeed,
        })
        .then((res) => {
          this.radiusList = res.data.data;
        });
      if (this.typeSelect == '1') {
        this.$http
          .post("/vehicleBasicInfo/selectDesignSpeedInfoList", {
            designSpeed: this.form.designSpeedCompare,
          })
          .then((res) => {
            this.restrictSpeedListCompare = res.data.data;
          });
        this.$http
          .post("/vehicleBasicInfo/selectRadiusByDesignSpeed", {
            designSpeed: this.form.designSpeedCompare,
          })
          .then((res) => {
            this.radiusListCompare = res.data.data;
          });
      }
    },
    getRampList() {
      this.$http.post("/vehicleBasicInfo/selectLaneWidthList", { creatorId: localStorage.getItem("userId") }).then((res) => {
        this.laneWidthList = res.data.data;
      });
      this.$http
        .post("/vehicleBasicInfo/selectDirectionCorrectionFactorInfoList")
        .then((res) => {
          this.directionalDistributionList = res.data.data;
        });
      this.$http
        .post("/vehicleBasicInfo/selectThroughWayInfoList")
        .then((res) => {
          this.throughWayList = res.data.data;
        });

    },
    getShoulderWidth() {
      this.form.roadShoulderWidth = ''
      this.$http
        .post("/vehicleBasicInfo/selectRoadShoulderWidthInfoList", {
          laneWidth: this.form.laneWidth,
        })
        .then((res) => {
          this.shoulderWidthList = res.data.data;
        });
    },
    getLaneWidthList(val) {
      this.$http
        .post("/vehicleBasicInfo/selectReservedLaneWidthList", {
          designSpeed: val
            ? this.form.designSpeedCompare
            : this.form.designSpeed,
          restrictSpeed: val
            ? this.form.restrictSpeedCompare
            : this.form.restrictSpeed,
        })
        .then((res) => {
          //   this.form.reservedLaneWidth = "";
          //   this.contastform.reservedLaneWidth = "";
          this.reservedLaneWidthList = res.data.data;
        });
    },
    putongClassChange() {
      this.form.laneWidth = '';
      this.form.centreWidth = '';
      this.form.crossSlope = '';
      // this.form.designSpeed = '';

      this.$http
        .post("/vehicleBasicInfo/selectPutongDesignSpeedInfoList", { putongClass: this.form.putongClass })
        .then((res) => {
          this.speedList3 = res.data.data;
        });
      if (this.form.putongClass != '0') {
        this.$http
          .post("/vehicleBasicInfo/selectLaneWidthInfoList", { putongClass: this.form.putongClass })
          .then((res) => {
            this.laneWidthList3 = res.data.data;
          });
        this.$http
          .post("/vehicleBasicInfo/selectCentreWidthInfoList", { putongClass: this.form.putongClass })
          .then((res) => {
            this.middleWidthList3 = res.data.data;
          });
        this.$http
          .post("/vehicleBasicInfo/selectCrossSlopeInfoList", { putongClass: this.form.putongClass })
          .then((res) => {
            this.slopeList3 = res.data.data;
          });
      }

    },
    putongClassCompareChange() {
      this.form.laneWidthCompare = '';
      this.form.centreWidthCompare = '';
      this.form.crossSlopeCompare = ''; this.form.designSpeedCompare = '';
      this.$http
        .post("/vehicleBasicInfo/selectPutongDesignSpeedInfoList", { putongClass: this.form.putongClassCompare })
        .then((res) => {
          this.speedList3Compare = res.data.data;
        });
      if (this.form.putongClassCompare != '0') {
        this.$http
          .post("/vehicleBasicInfo/selectLaneWidthInfoList", { putongClass: this.form.putongClassCompare })
          .then((res) => {
            this.laneWidthList3Compare = res.data.data;
          });
        this.$http
          .post("/vehicleBasicInfo/selectCentreWidthInfoList", { putongClass: this.form.putongClassCompare })
          .then((res) => {
            this.middleWidthList3Compare = res.data.data;
          });
        this.$http
          .post("/vehicleBasicInfo/selectCrossSlopeInfoList", { putongClass: this.form.putongClassCompare })
          .then((res) => {
            this.slopeList3Compare = res.data.data;
          });
      }

    },
    onSubmit(type) {
      this.form.coefficientClass = this.typeSelect;
      this.form.isConstruction = this.isConstruction;
      this.$http
        .post("/vehicleBasicInfo/SafetyEvaluationCalculation4", this.form)
        .then((res) => {
          console.log(res);
          if (res.data.success) {
            this.$set(this.barGroupData, 'data', [])
            this.$set(this.lineLevelData.data[0], 'data', [])
            this.$set(this.lineLevelData.data[1], 'data', [])
            this.isImageShow = true;
            this.resultData = res.data.data.calculateAVEResultDo;

            if (res.data.data.calculateAVEResultDoCompare) {
              this.isComperaShow = true
              this.resultDataCompare = res.data.data.calculateAVEResultDoCompare
              this.guaueData1 = this.resultDataCompare.designSpeed;
              this.tableDataCompare = this.resultDataCompare.vehicleInfoList;
              let pieNum = this.resultDataCompare.minibusAbsoluteNum + this.resultDataCompare.middleCarAbsoluteNum + this.resultDataCompare.largeCarAbsoluteNum + this.resultDataCompare.automobileTrainAbsoluteNum

              //速度饼图
              let pieData1 = [
                { value: this.resultDataCompare.minibusAbsoluteNum, name: '小客车' },
                { value: this.resultDataCompare.middleCarAbsoluteNum, name: '中型车' },
                { value: this.resultDataCompare.largeCarAbsoluteNum, name: '大型车' },
                { value: this.resultDataCompare.automobileTrainAbsoluteNum, name: '汽车列车' },
              ]
              // pieData1.forEach(item=>{
              //   item.name=item.name+Math.floor((item.value/pieNum)*100)+'%'
              // })
              this.pieData1 = pieData1.filter(item => item.value !== 0);
            }

            this.guaueData = this.resultData.designSpeed;
            // let pieNum1=this.resultData.minibusAbsoluteNum+this.resultData.middleCarAbsoluteNum+this.resultData.largeCarAbsoluteNum+this.resultData.automobileTrainAbsoluteNum

            //速度饼图
            let pieData = [
              { value: this.resultData.minibusAbsoluteNum, name: '小客车' },
              { value: this.resultData.middleCarAbsoluteNum, name: '中型车' },
              { value: this.resultData.largeCarAbsoluteNum, name: '大型车' },
              { value: this.resultData.automobileTrainAbsoluteNum, name: '汽车列车' },
            ]
            // pieData.forEach(item=>{
            //     item.name=Math.round((item.value/pieNum1)*100)+'% /n'+item.name
            //   })
            this.pieChartsData = pieData.filter(item => item.value !== 0);
            //柱状
            // this.barGroupData.data = [];

            let xAxisData = res.data.data.calculateResultDoList.map(item => item.dateTime);
            let xAxisData1 = res.data.data.calculateResultDoListCompare.map(item => item.dateTime);
            res.data.data.vehicleInfoList.forEach(item => {
              item.type = 'bar'
              item.barWidth = '30%'
              item.stack = '周'
              //   item.label= {
              //   show: true, position: 'top', fontSize: 15
              // }
              item.data = item.dataList
            })

            this.barGroupData.data = res.data.data.vehicleInfoList

            this.barGroupData.xAxisData[0].data = xAxisData
            //
            this.lineLevelData.xAxisData = xAxisData
            let lineData = []; let lineCompare = []
            res.data.data.calculateResultDoList.forEach(item => {
              lineData.push(this.setNum(item.serviceLevelValue))
            })
            this.lineLevelData.data[0].data = lineData;
            if (res.data.data.calculateResultDoListCompare.length > 0) {
              this.barOption.xAxis.data = [...this.resultData.dateList, ...this.resultDataCompare.dateList];
              let xArr = []
              if (res.data.data.calculateResultDoListCompare.length >= res.data.data.calculateResultDoList.length) {

                res.data.data.calculateResultDoListCompare.forEach((item, index) => {
                  if (xAxisData[index]) {
                    xArr.push(item.dateTime + '\n             ' + xAxisData[index])
                  } else {
                    xArr.push(item.dateTime)
                  }

                })
                this.barGroupData.xAxisData[0].data = xArr
                console.log(this.barGroupData.xAxisData, 'barx周1');
                this.lineLevelData.xAxisData = xArr
              } else {
                res.data.data.calculateResultDoList.forEach((item, index) => {
                  item.dateTime = item.dateTime + '\n          ' + xAxisData1[index] ? xAxisData1[index] : ''
                })
                this.barGroupData.xAxisData[0].data = xArr
                this.lineLevelData.xAxisData = xArr
                console.log(this.barGroupData.xAxisData, 'barx周');
              }
              res.data.data.vehicleInfoListCompare.forEach(item => {
                item.type = 'bar'
                item.barWidth = '30%'
                item.stack = '周熟人'
                item.data = item.dataList
                //     item.label= {
                //   show: true, position: 'top', fontSize: 15
                // }
              })

              this.barGroupData.data = [...res.data.data.vehicleInfoList, ...res.data.data.vehicleInfoListCompare];
              res.data.data.calculateResultDoListCompare.forEach(item => {
                lineCompare.push(this.setNum(item.serviceLevelValue))
              })
              this.lineLevelData.data[1].data = lineCompare

            } else {
              this.barOption.xAxis.data = [...this.resultData.dateList];
            }
            this.lineLevelData.data.forEach(item => {

              item.label.formatter = (params) => {
                console.log(params);
                if (params.value < 1) {
                  if (params.value == 0) {
                    return 0;
                  } else {
                    return (params.value / (1 / 0.35)).toFixed(3) + '\n'
                  }
                }
                if (params.value > 1 && params.value < 2) {
                  return ((params.value - 1) / 5 + 0.35).toFixed(3) + '\n'
                }
                if (params.value > 2 && params.value < 3) {
                  return ((params.value - 2) / 5 + 0.55).toFixed(3) + '\n'
                }
                if (params.value > 3 && params.value < 4) {
                  return ((params.value - 3) / (1 / 15) / 100 + 0.75) + '\n'
                }
                if (params.value > 4 && params.value < 5) {
                  return ((params.value - 4) / 10 + 0.9).toFixed(3) + '\n'
                }
                if (params.value > 5) {
                  return ((params.value - 5)).toFixed(3) + '\n'
                }
              };
            })
            this.downloadShow = true;
            this.tableData = this.resultData.vehicleInfoList;
            var element = document.getElementById('myBarId');
      if(element){
        this.myChart = echarts.init(element);
            this.barOption.series[0].data = [
              this.setNum(this.resultData.serviceLevelValue),
              this.setNum(this.resultDataCompare.serviceLevelValue),
            ];
            this.barOption.series[0].label.formatter = (params) => {
              if (params.value < 1) {
                if (params.value == 0) {
                  return 0;
                } else {
                  return 'V/C(' + (params.value / (1 / 0.35)).toFixed(3) + ')\n\n' + '一级服务水平';
                }
              }
              if (params.value > 1 && params.value < 2) {
                return 'V/C(' + ((params.value - 1) / 5 + 0.35).toFixed(3) + ')\n\n' + '二级服务水平';
              }
              if (params.value > 2 && params.value < 3) {
                return 'V/C(' + ((params.value - 2) / 5 + 0.55).toFixed(3) + ')\n\n' + '三级服务水平';
              }
              if (params.value > 3 && params.value < 4) {
                return 'V/C(' + ((params.value - 3) / (1 / 15) / 100 + 0.75) + ')\n\n' + '四级服务水平';
              }
              if (params.value > 4 && params.value < 5) {
                return 'V/C(' + ((params.value - 4) / 10 + 0.9).toFixed(3) + ')\n\n' + '五级服务水平';
              }
              if (params.value > 5) {
                return 'V/C(' + ((params.value - 5)).toFixed(3) + ')\n\n' + '六级服务水平';
              }
            };
            this.myChart.setOption(this.barOption);
          }
            this.$message.success(res.data.info);
          } else {
            this.$message.error(res.data.info);
          }
        });
    },
    setNum(num) {// 0.253   0.357   0.535  0.854     0.967
      if (typeof num === 'number' && !isNaN(num)) {
        if (num == 0) {
          return 0;
        }
        if (num < 0.35) {
          return (1 / 0.35 * num).toFixed(3);
        }
        if (num > 0.35 && num < 0.55) {
          return (0.05 * (num - 0.35) * 100 + 1).toFixed(3)
        }
        if (num > 0.55 && num < 0.75) {
          return (2 + (1 / 20) * (num - 0.55) * 100).toFixed(3)
        }
        if (num > 0.75 && num < 0.9) {
          return (3 + (1 / 15) * (num - 0.75) * 100).toFixed(3)
        }
        if (num > 0.9 && num < 1) {
          return (4 + (1 / 10) * (num - 0.9) * 100).toFixed(3)
          // return 4+(num-0.9)*10;
        }
        if (num > 1) {
          return num + 5;
        }
      }
    },

    handleAvatarSuccess(res, file) {
      // this.$refs.upload.clearFiles();
      this.form.path = res.data[0].path;
      this.$message.success('上传成功')
    },
    handleAvatarSuccess1(res, file) {
      this.form.pathCompare = res.data[0].path;
      this.$message.success('上传成功')
    },
    download(type) {
      const fileUrl = type == 1 ? this.resultData.docUrl : this.resultDataCompare.docUrl; // 文件的URL地址
      const link = document.createElement("a");
      link.href = fileUrl;
      link.setAttribute("download", "交通组织方案安全评价报告");
      link.click();
    },
    getSlope() {
      this.$http
        .post("/vehicleBasicInfo/selectSlopeByRadiusId", {
          radiusId: this.form.radiusId,
        })
        .then((res) => {
          this.slopeList = res.data.data;
        });
    },
    getSlope2() {
      this.$http
        .post("/vehicleBasicInfo/selectSlopeByRadiusId", {
          radiusId: this.form.radiusIdCompare,
        })
        .then((res) => {
          this.slopeListCompare = res.data.data;
        });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.chartsBox {
  position: relative;
}

.num {
  list-style: none;
}

.num :nth-child(1) {
  position: absolute;
  left: 0;
  bottom: 100px;
}

.num :nth-child(2) {
  position: absolute;
  left: 0;
  bottom: 185px;
}

.num :nth-child(3) {
  position: absolute;
  left: 0;
  bottom: 260px;
}

.num :nth-child(4) {
  position: absolute;
  left: 0;
  bottom: 335px;
}

.num :nth-child(5) {
  position: absolute;
  left: 0;
  bottom: 410px;
}

.num :nth-child(6) {
  position: absolute;
  left: 0;
  bottom: 485px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  width: 60%;
  margin: 0 auto;
}

.el-select {
  width: 100%;
}

.imageList .imageItem {
  display: flex;
  text-align: left;
  align-items: center;
}

.imageList img {
  width: 50%;
}

.typeSelect {
  width: 300px;
  margin: 0 50px;
}

#myBarId {
  height: 650px;
}

/deep/.column-custom {
  padding: 0px !important;
}

/deep/.el-table--border .el-table__cell:first-child .cell {
  padding: 0px !important;
}

/deep/ .el-table .el-table__cell {
  padding: 0px !important;
  height: 50px;
  text-align: center;
}

.headBox {
  position: relative;
  height: 75px;
}

.headerCon1 {
  position: absolute;
  left: 0;
  bottom: 0;
}

.headerCon2 {
  position: absolute;
  right: 0;
  top: 0;
}

.line {
  width: 1px;
  height: 165px;
  transform: rotate(-63.5deg);
  /*这里需要自己调整，根据线的位置*/
  transform-origin: top;
  background-color: #ebeef5;
}


.cameraBox {
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed;
  margin-left: 100px;
  margin-bottom: 20px;
}

.el-icon-camera {
  font-size: 20px;
}
</style>